<script>
export default {
    props: ['compElement'],
    methods: {
        // setCurrent(row) {
        //     this.$refs.singleTable.setCurrentRow(row)
        // },
        // handleCurrentChange(val) {
        //     this.currentRow = val
        // }
    },
    data() {
        return {
            tableData: [
                {
                    date: '2016-05-02',
                    name: '王小虎',
                    address:
                        '上海市普陀区金沙江路 1518 弄 上海市普陀区金沙江路 1518 弄'
                },
                {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                },
                {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                },
                {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }
            ],
            currentRow: null
        }
    },
    created() {}
}
</script>
<template>
    <div>
        <div class="comp-element">Element组件的使用</div>

        <div class="comp-element">
            Layout布局
            <el-row :gutter="20">
                <el-col :span="6"
                    ><div class="grid-content bg-purple"></div
                ></el-col>
                <el-col :span="6"
                    ><div class="grid-content bg-purple"></div
                ></el-col>
                <el-col :span="6"
                    ><div class="grid-content bg-purple"></div
                ></el-col>
                <el-col :span="6"
                    ><div class="grid-content bg-purple"></div
                ></el-col>
            </el-row>
        </div>
        <div class="comp-element">
            Button按钮
            <el-row>
                <el-button>默认按钮</el-button>
                <el-button type="primary">主要按钮</el-button>
                <el-button type="success">成功按钮</el-button>
                <el-button type="info">信息按钮</el-button>
                <el-button type="warning">警告按钮</el-button>
                <el-button type="danger">危险按钮</el-button>
            </el-row>
            <el-row>
                <el-button plain>朴素按钮</el-button>
                <el-button type="primary" plain>主要按钮</el-button>
                <el-button type="success" plain>成功按钮</el-button>
                <el-button type="info" plain>信息按钮</el-button>
                <el-button type="warning" plain>警告按钮</el-button>
                <el-button type="danger" plain>危险按钮</el-button>
            </el-row>
            <el-row>
                <el-button round>圆角按钮</el-button>
                <el-button type="primary" round>主要按钮</el-button>
                <el-button type="success" round>成功按钮</el-button>
                <el-button type="info" round>信息按钮</el-button>
                <el-button type="warning" round>警告按钮</el-button>
                <el-button type="danger" round>危险按钮</el-button>
            </el-row>
            <el-button type="text">文字按钮</el-button>
            <el-button type="text" disabled>文字按钮</el-button>
            <el-button type="primary" :loading="true">加载中</el-button>
        </div>
        <div class="comp-element">
            Link 文字链接
            <el-row>
                <el-link href="https://element.eleme.io" target="_blank"
                    >默认链接</el-link
                >
                <el-link type="primary">主要链接</el-link>
                <el-link type="success">成功链接</el-link>
                <el-link type="warning">警告链接</el-link>
                <el-link type="danger">危险链接</el-link>
                <el-link type="info">信息链接</el-link>
            </el-row>
        </div>
        <div class="comp-element">
            <el-table
                ref="singleTable"
                :data="tableData"
                highlight-current-row
                @current-change="handleCurrentChange"
                style="width: 100%"
            >
                <el-table-column type="index" width="50"> </el-table-column>
                <el-table-column property="date" label="日期" width="120">
                </el-table-column>
                <el-table-column property="name" label="姓名" width="120">
                </el-table-column>
                <el-table-column property="address" label="地址">
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<style>
.comp-element {
    margin-bottom: 30px;
}
.el-row {
    margin-bottom: 20px;
    &:last-child {
        margin-bottom: 0;
    }
}
.el-col {
    border-radius: 4px;
}
.bg-purple-dark {
    background: #99a9bf;
}
.bg-purple {
    background: #d3dce6;
}
.bg-purple-light {
    background: #e5e9f2;
}
.grid-content {
    border-radius: 4px;
    min-height: 36px;
}
.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}
</style>
